<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="序号"
      width="300">
    </el-table-column>
    <el-table-column
      prop="problem_id"
      label="问题标识"
      width="240">
    </el-table-column>
    <el-table-column
      prop="case_id"
      label="测试用例标识"
      width="240">
    </el-table-column>
    <el-table-column
      prop="problem_category"
      label="问题类别"
      width="240">
    </el-table-column>
    <el-table-column
      prop="problem_level"
      label="问题级别"
      width="240">
    </el-table-column>
    <el-table-column
      prop="problem_description"
      label="问题描述"
      width="300">
    </el-table-column>
    <el-table-column
      prop="remark"
      label="备注"
      width="240">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="240">
      <template slot-scope="scope">
        <el-button @click="edit(scope.row)" type="text" size="big">修改</el-button>
        <el-button @click="deleteRow(scope.row)" type="text" size="big">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    page(currentPage) {
      const _this = this
      axios.get('http://localhost:8088/problem/findAll/' + currentPage + '/6').then(function (resp) {
        _this.tableData = resp.data.content
        _this.total = resp.data.totalElements
      })
    },
    deleteRow(row) {
      const _this = this
      axios.delete('http://localhost:8088/problem/deleteById/' + row.id).then(function(resp) {
        _this.$alert('《' + row.problem_id + '》删除成功！', '消息', {
          confirmButtonText: '确定',
          callback: action => {
            window.location.reload()
          }
        })
      })
    },
    edit(row) {
      this.$router.push({
        path: '/case_bug_update',
        query: {
          id: row.id
        }
      })
    }
  },
  created () {
    const _this = this
    axios.get('http://localhost:8088/problem/findAll/1/6').then(function (resp) {
      _this.tableData = resp.data.content
      _this.total = resp.data.totalElements
    })
  },
  data() {
    return {
      total: null,
      tableData: null
    }
  }
}
</script>
